<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./lib/React/react.devlopment.js"></script>
    <script src="./lib/React/react-dom.development.js"></script>
    <!-- 引入 Babel 转码器 -->
    <script src="./lib/babel.min.js"></script>
</head>
<body>
    <div id="app"></div>

    <script type="text/babel">

        // 1. { }   到底能写哪些东西
        const str = 'hello world.';
        function func() {
            return '函数返回值'
        }
        const obj = {
            name: '迪丽热巴',
            sayHi() {
                return 'Hi.'
            }
        }
        const arr = [
            React.createElement('span', { key: 1 }, '虚拟的子节点1'),
            React.createElement('span', { key: 2 }, '虚拟的子节点2'),
            React.createElement('span', { key: 3 }, '虚拟的子节点3')
        ]
        const vNode =  <div>
                {/* 标签产生了，内容不输出 */}
                <p>{ undefined }</p>
                <p>{ null }</p>
                <p>{ true }</p>
                <p>{ false }</p>
                <p>{ Symbol('aa') }</p>
                {/* 标签和内容一起产生 */}
                <p>{ 2022 }</p>
                <p>{ '如果是字符串，一定要记得加引号' }</p>
                <p>{ str + ' - 程序员' }</p>
                {/* 会把每个元素解析成单个的字符 */}
                <p>{ [1, 2, 3, 4] }</p>
                {/* 可以在这里调用函数 */}
                <p>{ func() }</p>
                {/* 可以对象的属性和方法 */}
                <p>{ obj.name + obj.sayHi() }</p>
                {/* 不管是直接对象还是数组的对象，都会报错 */}
                {/* <p>{ [{ a: 10 }] }</p> */}

                {/* 可以是虚拟的节点 */}
                <p>{ React.createElement('span', null, '虚拟的子节点') }</p>
                {/* 也可以是多个虚拟的子节点 */}
                <p>{ arr }</p>

                {/* 也可以执行表达式 */}
                <p>{ 10 * 5 }</p>
                <p>{ 10 > 5 ? '已完成' : '未完成' }</p>
                {/* 不能写语句 流程控制语句，函数，声明一些数据 */}

                {/* 这个方法有return的值，可以执行 */}
                <p>{ [1, 2, 3, 4, 5].map(item => item) }</p>
            </div>

        //2. 渲染到指定的容器
        ReactDOM.render(
            vNode,
            document.querySelector('#app')
        )

    </script>
</body>
</html>